<template>
    <div>
        <div class="cont">
            <div class="tuceng0" v-show="bimgshow">
                <div class="tuceng">
                    <div class="mess">{{ mess }}</div>
                    <div class="closeimg" @click="closeimg"></div>
                    <img :src="bigimg" alt="" />
                    <div class="closeimg" @click="closeimg">X</div>
                </div>
            </div>
            <div class="cont1">
                <div class="movie" v-show="showmovie">
                    <div class="close" @click="closehaha">X</div>
                    <div class="center1-top">
                        <video :src="srcvdio" type="video/mp4" id="vid" controls autoplay>您的浏览器不支持 video 标签。</video>
                    </div>
                    <div id="schart333">
                        <div @click="changevideo1" class="img1">触电事故</div>
                        <div @click="changevideo2" class="img1">支模坍塌</div>
                        <div @click="changevideo3" class="img1">基坑坍塌</div>
                        <div @click="changevideo4" class="img1">起重伤害</div>
                        <div @click="changevideo5" class="img1">物体打击</div>
                        <div @click="changevideo6" class="img1">高出坠落</div>
                        <div @click="changevideo7" class="img1">安全带</div>
                        <div @click="changevideo8" class="img1">安全钳使用方法</div>
                        <div @click="changevideo9" class="img1">保持与机器适当的距离</div>
                        <div @click="changevideo10" class="img1">操作天车</div>
                        <div @click="changevideo11" class="img1">触电事故</div>
                        <div @click="changevideo12" class="img1">钢筋绑扎</div>
                        <div @click="changevideo13" class="img1">钢筋厂加工</div>
                        <!-- <div @click="changevideo14" class="img1">高空作业</div> -->

                        <div @click="changevideo15" class="img1">开挖基井注意事项</div>
                        <div @click="changevideo16" class="img1">灭火器使用方法</div>
                    </div>
                </div>
                <div class="cont11">
                    <div class="cell">
                        <img style="width: 49px; height: 54px; margin-top: 3px" src="../../assets/img/peix1.png" alt />
                        <div class="box1">
                            <span>1道</span>
                            <span>试卷</span>
                        </div>
                    </div>
                </div>
                <div class="cont11">
                    <div class="cell">
                        <img style="width: 51px; height: 54px; margin-top: 4px" src="../../assets/img/peix2.png" alt />
                        <div class="box1">
                            <span>19套</span>
                            <span>交底</span>
                        </div>
                    </div>
                </div>
                <div class="cont111">
                    <div class="cell">
                        <img style="width: 54px; height: 54px; margin-top: 3px" src="../../assets/img/peix3.png" alt />
                        <div class="box1">
                            <span>{{ count_xyy }}位</span>
                            <span>学员</span>
                        </div>
                        <div class="box11">
                            <span>{{ count_lw }}位</span>
                            <span>劳务人员</span>
                        </div>
                        <div class="box11">
                            <span>{{ count_gl }}位</span>
                            <span>职工</span>
                        </div>
                    </div>
                </div>

                <div class="cont11">
                    <div class="cell">
                        <img style="width: 49px; height: 53px; margin-top: 3px" src="../../assets/img/peix5.png" alt />
                        <div class="box1">
                            <span class="anniu" @click="openvideo">{{ count_kc }}节</span>
                            <span>视频课程</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="cont2">
                <div class="cont22">
                    <div class="tit"><img src="../../assets/img/con2.png" alt />考试培训人数汇总</div>
                    <div id="schart1"></div>
                    <div id="schart1-" v-show="schart1show"><img src="../../assets/img/zanwu.png" alt="" /></div>
                </div>
                <div class="cont22">
                    <div class="tit"><img src="../../assets/img/con3.png" alt />培训情况总览</div>
                    <div id="schart">
                        <div id="schart11"></div>
                        <div id="schart22"></div>
                    </div>
                </div>
            </div>
            <div class="cont3">
                <div class="tit"><img src="../../assets/img/con4.png" alt />培训照片展示</div>
                <div class="xce" v-show="xce"><img src="../../assets/img/zanwu.png" alt="" /></div>
                <div id="bigbox">
                    <div id="box10" :style="{ marginLeft: marginLeft + 'px' }">
                        <div class="box00" v-for="(value, index) in realData" :key="index" @click="handleUpdate(index)">
                            <img :src="value.img_url" alt="" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import echarts from 'echarts';
import Pagination from '@/components/Pagination'; // Secondary package based on el-pagination
import $ from 'jquery';
import waves from '@/directive/waves';
import ajax from '@/utils/myajax';
export default {
    components: { Pagination },
    directives: { waves },
    data() {
        return {
            xce: false,
            schart1show: false,
            datacount: '',
            marginLeft: 0,
            marginLeft1: 0,
            mess: '',
            bimgshow: false,
            bigimg: '',
            count_gl: '',
            count_lw: '',
            count_xyy: '',
            realData: [],
            srcvdio: 'http://jjjt.oss-cn-shanghai.aliyuncs.com/video/cdsg.mp4',
            showmovie: false,
            options22: [],
            options11: [],
            count_st: '',
            count_sj: '',
            count_xy: '',
            count_lx: '',
            count_kc: ''
        };
    },
    created() {
        // this.timer = setInterval(this.showNotice, 100); //100表示间隔时间，数字越大滚得越快
        this.timer = setInterval(this.fun, 1);
    },
    methods: {
        fun() {
            var me = this;

            // this.marginLeft1 = me.datacount;
            // alert(this.marginLeft1)
            this.marginLeft -= 0.1;
            // this.marginLeft1 -= 1;
            // var count = datacount ;
            if (this.marginLeft < -4600) {
                // 滚上去36px后把前两条数据拉下来
                // me.realData.push(this.realData[0]);
                // me.realData.push(this.realData[1]); // 因为项目要求数据一条白一条黄，所以两条两条循环
                // this.realData.shift();
                // this.realData.shift();
                this.marginLeft = 0;
                // this.marginLeft1 = me.datacount;
            }
        },
        handleUpdate(index) {
            var me = this;
            var imgindex = this.realData[index].id;
            me.bimgshow = true;
            ajax('TrainPhoto/FindTrainPhotoById', { id: imgindex }, function (data) {
                me.bigimg = 'http://jjjt.oss-cn-shanghai.aliyuncs.com/' + data.img_url;
                me.mess = data.message;
                //    console.log(bigimg,6666)
            });
        },
        closeimg() {
            this.bimgshow = false;
        },
        openvideo() {
            this.showmovie = true;
        },
        closehaha() {
            this.showmovie = false;
            var videL = document.getElementById('vid');
            vid.pause();
        },
        changevideo1() {
            var me = this;
            me.srcvdio = 'http://jjjt.oss-cn-shanghai.aliyuncs.com/video/cdsg.mp4';
        },
        changevideo2() {
            var me = this;
            me.srcvdio = 'http://jjjt.oss-cn-shanghai.aliyuncs.com/video/zmtt.mp4';
        },
        changevideo3() {
            var me = this;
            me.srcvdio = 'http://jjjt.oss-cn-shanghai.aliyuncs.com/video/jktt.mp4';
        },
        changevideo4() {
            var me = this;
            me.srcvdio = 'http://jjjt.oss-cn-shanghai.aliyuncs.com/video/qzsh.mp4';
        },
        changevideo5() {
            var me = this;
            me.srcvdio = 'http://jjjt.oss-cn-shanghai.aliyuncs.com/video/wtdj.mp4';
        },
        changevideo6() {
            var me = this;
            me.srcvdio = 'http://jjjt.oss-cn-shanghai.aliyuncs.com/video/jksh.mp4';
        },
        changevideo7() {
            var me = this;
            me.srcvdio = 'http://jjjt.oss-cn-shanghai.aliyuncs.com/video/AQD.mp4';
        },
        changevideo8() {
            var me = this;
            me.srcvdio = 'http://jjjt.oss-cn-shanghai.aliyuncs.com/video/AQQSYFF.mp4';
        },
        changevideo9() {
            var me = this;
            me.srcvdio = 'http://jjjt.oss-cn-shanghai.aliyuncs.com/video/BCYJQSDDJL.mp4';
        },
        changevideo10() {
            var me = this;
            me.srcvdio = 'http://jjjt.oss-cn-shanghai.aliyuncs.com/video/CZTC.mp4';
        },
        changevideo11() {
            var me = this;
            me.srcvdio = 'http://jjjt.oss-cn-shanghai.aliyuncs.com/video/CDSG.mp4';
        },
        changevideo12() {
            var me = this;
            me.srcvdio = 'http://jjjt.oss-cn-shanghai.aliyuncs.com/video/GJBZ.mp4';
        },
        changevideo13() {
            var me = this;
            me.srcvdio = 'http://jjjt.oss-cn-shanghai.aliyuncs.com/video/GJCJG.mp4';
        },

        changevideo15() {
            var me = this;
            me.srcvdio = 'http://jjjt.oss-cn-shanghai.aliyuncs.com/video/KWJJZYSX.mp4';
        },
        changevideo16() {
            var me = this;
            me.srcvdio = 'http://jjjt.oss-cn-shanghai.aliyuncs.com/video/MHQSYFF.mp4';
        }
    },
    mounted() {
        var me = this;
        var aaa = document.getElementById('box10');
        // alert(aaa.offsetWidth)
        me.datacount = aaa.offsetWidth;
        me.closehaha();
        me.section_id = localStorage.getItem('section_id');
        me.station_id = localStorage.getItem('station_id');
        ajax('count_PC/CountByTypeGL', { section_id: me.section_id }, function (data) {
            me.count_gl = data[0].count;
            ajax('count_PC/CountByTypeLW', { section_id: me.section_id }, function (data) {
                me.count_lw = data[0].count;
                me.count_xyy = me.count_lw + me.count_gl;
            });
        });

        ajax('TrainPhoto/SelectTrainPhoto', { section_id: me.section_id }, function (data) {
            if (data.length == 0) {
                me.xce = true;
            }
            var arr = data;
            console.log(data, 789);
            for (var i = 0; i < arr.length; i++) {
                if (arr[i].img_url) {
                    arr[i].img_url = 'http://jjjt.oss-cn-shanghai.aliyuncs.com/' + arr[i].img_url;
                }
            }
            me.realData = arr;
        });

        ajax('count_PC/CountByType', { section_id: me.section_id, station_id: me.station_id }, function (data) {
            var data1 = data.map((a) => a.type);
            var data2 = JSON.parse(JSON.stringify(data).replace(/type/g, 'name').replace(/count/g, 'value'));
            let myChart22 = echarts.init(document.getElementById('schart22'));
            let options22 = {
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                },
                title: {
                    text: '考试人员分析',
                    x: 'center',
                    y: 'bottom',
                    textStyle: {
                        color: 'rgba(251,251,251,1)'
                    }
                },
                color: ['#e45c70', '#0da7d7', '#7ba1ce'],
                legend: {
                    textStyle: {
                        color: '#fff',
                        fontWeight: 600
                    },
                    x: 'center', //可设定图例在左、右、居中
                    y: 'top', //可设定图例在上、下、居中
                    padding: [50, 0, 0, 0], //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
                    data: data1
                },
                series: [
                    {
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true,
                                    textStyle: {
                                        fontWeight: 600,
                                        fontSize: 15 //文字的字体大小
                                    },
                                    // position:'inner',
                                    formatter: ' {c} ({d}%)'
                                },
                                labelLine: {
                                    show: true
                                }
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    position: 'center',
                                    textStyle: {
                                        fontSize: '17',
                                        fontWeight: 600
                                    }
                                }
                            }
                        },
                        name: '人数',
                        type: 'pie',
                        radius: '40%',
                        center: ['53%', '60%'],
                        selectedMode: 'single',
                        data: data2,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };

            myChart22.setOption(options22);
            //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
            window.addEventListener('resize', function () {
                // myChart1.resize();
                myChart22.resize();
            });
        });

        ajax('count_PC/CountST', { section_id: me.section_id }, function (data) {
            me.count_st = data;
        });
        ajax('count_PC/CountSJ', { section_id: me.section_id }, function (data) {
            me.count_sj = data;
        });
        ajax('count_PC/CountXY', { section_id: me.section_id }, function (data) {
            me.count_xy = data;
        });
        ajax('count_PC/CountGGKC', { section_id: me.section_id }, function (data) {
            me.count_kc = data;
        });
        // ajax('count_PC/CountPXKC', { section_id: me.section_id }, function(data) {
        //     me.count_kc = data;
        // });

        ajax('count_PC/CountExamStaff', { section_id: me.section_id }, function (data) {
            if (data.length == 0) {
                me.schart1show = true;
            }
            var data1 = data.map((a) => a.month);
            var data2 = JSON.parse(
                JSON.stringify(data).replace(/month/g, 'name')
                // .replace(/day_value/g, 'value')
            );
            // 柱状图
            let myChart1 = echarts.init(document.getElementById('schart1'));
            let options1 = {
                color: ['#3398DB'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                    }
                },

                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '1%',
                    containLabel: true
                },
                xAxis: [
                    {
                        axisLabel: {
                            interval: 0,
                            rotate: 40,

                            show: true,
                            textStyle: {
                                color: '#c3dbff', //更改坐标轴文字颜色
                                fontSize: 14 //更改坐标轴文字大小
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#315070' //更改坐标轴颜色
                            }
                        },
                        type: 'category',
                        data: [
                            '水泥搅拌桩改CFG桩',
                            '筑岛围堰改条形基础',
                            '临水作业改存梁台座'
                            // '施工便道机械作业安全交底',
                            // '筑岛围堰安全交底',
                            // '临水作业安全交底'
                        ],
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis: [
                    {
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: ['#315070'],
                                width: 1,
                                type: 'solid'
                            }
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#c3dbff', //更改坐标轴文字颜色
                                fontSize: 14 //更改坐标轴文字大小
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#315070' //更改坐标轴颜色
                            }
                        },
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '人数',
                        type: 'bar',
                        barWidth: '30%',
                        data: [
                            { name: '三级教育', value: 137 },
                            { name: '水泥搅拌桩安全交底', value: 37 },
                            { name: '钢筋加工场门吊安全交底', value: 25 },
                            { name: '施工便道机械作业安全交底', value: 32 },
                            { name: '筑岛围堰安全交底', value: 36 },
                            { name: '临水作业安全交底', value: 42 }
                        ],
                        // color:'rgb(42,170,227)',
                        itemStyle: {
                            normal: {
                                barBorderRadius: [0, 0, 0, 0], //圆角 柱子
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {
                                        offset: 0,
                                        color: '#5E62E5'
                                    },
                                    {
                                        offset: 1,
                                        color: '#CF53FF'
                                    }
                                ])
                            }
                        }
                    }
                ]
            };
            myChart1.setOption(options1);
            //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
            window.addEventListener('resize', function () {
                // myChart1.resize();
                myChart1.resize();
            });
        });

        var donum1 = 100; //已完成百分比
        var data1 = donum1 + '%';
        var rest1 = 100 - donum1;
        let myChart11 = echarts.init(document.getElementById('schart11'));
        let options11 = {
            title: {
                text: '岗前三级教育培训率',
                x: 'center',
                y: 'bottom',
                textStyle: {
                    color: 'rgba(251,251,251,1)'
                }
            },

            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: ['60', '70%'], //这里是控制环形内半径和外半径
                    avoidLabelOverlap: false,
                    hoverAnimation: false, //此处查了好久属性//控制鼠标放置在环上时候的交互
                    labelLine: false,
                    label: {
                        normal: {
                            show: true,
                            position: 'center',

                            textStyle: {
                                fontSize: '16',
                                fontWeight: 'bold'
                            }
                        }
                    },
                    data: [
                        {
                            value: donum1,
                            name: data1,
                            color: '#000000'
                        },

                        {
                            value: rest1,
                            name: ''
                        }
                    ]
                }
            ],
            color: ['#7AD2F6', '#C9C9C9']
        };

        myChart11.setOption(options11);
        //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
        window.addEventListener('resize', function () {
            myChart11.resize();
        });
    }
};
</script>


<style scoped>
.mulu {
    float: left;
    width: 1500px;
    height: 60px;
    background: peru;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
    display: flex;

    justify-content: space-between;
}
.mulu1 {
    margin-bottom: 10px;
    /* float: left; */
    margin-left: 20px;
    width: 400px;
    height: 46px;
    background: rgb(72, 103, 206);
}
#schart333 {
    margin-top: 18px;
    height: 60px;
    width: 100%;

    overflow: hidden;
    overflow-x: auto;
    white-space: nowrap;
}
.img1 {
    cursor: pointer;
    width: 190px;
    height: 40px;
    margin-left: 20px;
    text-align: center;
    line-height: 40px;
    color: white;
    font-size: 18px;
    /* margin-left: 20px; */
    background: #659ff7;

    display: inline-block;
}
.cont3 {
    width: 100%;
    height: 303px;
    background: rgba(14, 61, 131, 0.2);
    border: 1px solid rgba(0, 255, 255, 0.5);
}
.xce {
    width: 100%;
    height: 253px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.xce img {
    /* margin-top: 30px; */
    width: 200px;
    height: 200px;
}
#bigbox {
    float: left;
    width: 1824px;
    margin-top: 10px;
    height: 256px;
    /* overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap; */
    /* background: aquamarine; */
    overflow: hidden;
    overflow-x: auto;
    white-space: nowrap;
    /* display:-webkit-box; */
}

.box10 {
    /* float: left; */
    height: 246px;
    /* width: 380px; */
    margin-left: 20px;
}
.box100 {
    /* float: left; */
    height: 246px;
    /* width: 380px; */
    margin-left: 20px;
}
.box00 {
    height: 246px;
    /* width: 380px; */
    margin-left: 20px;
    /* background: brown; */
    display: inline-block;
}
.box00 img {
    cursor: pointer;
    height: 240px;
}
.movie {
    border-radius: 20px;
    /* position: relative; */
    position: absolute;
    left: 290px;
    width: 1300px;
    height: 800px;
    background: rgb(8, 74, 160);
    z-index: 999;
}
.close {
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 2px;
    width: 30px;
    height: 30px;
    color: white;
    font-size: 22px;
}
video {
    margin-top: 20px;
    margin-left: 50px;
    width: 1200px;
    height: 680px;
    /* background: rgba(2, 154, 255, 1); */
}
.anniu {
    cursor: pointer;
}
.tit {
    float: left;
    margin-top: 10px;
    width: 94%;
    margin-left: 3%;
    height: 24px;
    font-size: 24px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: rgba(177, 236, 255, 1);
    line-height: 24px;
    /* background: tomato; */
}
.tit img {
    float: left;
    width: 25px;
    height: 25px;
    padding: 0 8px;
}
.cell {
    width: 150px;
    height: 60px;
    margin-top: 22px;
    margin-left: 100px;
    display: flex;
    justify-content: space-between;
}
.box1 span:first-child {
    float: left;
    margin-top: 5px;
    width: 90px;
    height: 30px;
    line-height: 30px;
    color: rgba(0, 249, 251, 1);
    font-size: 30px;
}
.box1 span:last-child {
    float: left;
    width: 90px;
    height: 25px;
    line-height: 25px;
    font-size: 18px;
    font-family: Source Han Sans CN;
    font-weight: 300;
    color: rgba(255, 255, 255, 1);
}
.box1 {
    margin-left: 25px;
    width: 130px;
    height: 60px;
}
.box11 span:first-child {
    margin-left: 30px;
    float: left;
    margin-top: 5px;
    width: 120px;
    height: 30px;
    line-height: 30px;
    color: rgba(0, 249, 251, 1);
    font-size: 24px;
}
.box11 span:last-child {
    margin-left: 30px;
    float: left;
    width: 120px;
    height: 25px;
    line-height: 25px;
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 300;
    color: rgba(255, 255, 255, 1);
}
.box11 {
    margin-left: 25px;
    width: 130px;
    height: 60px;
}
.cont {
    margin-top: 20px;
    width: 96%;
    margin-left: 2%;
    height: 860px;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}
.tuceng0 {
    position: absolute;
    top: 0;
    left: 10%;
    width: 80%;
    height: 90%;
    display: flex;
    justify-content: center;
}
.tuceng {
    height: 98%;
    z-index: 999;
    background: rgb(253, 253, 253);
    display: flex;
    justify-content: center;
}
.tuceng img {
    border: 5px solid #fff;
    margin-top: 35px;
    height: 93%;
}
.mess {
    width: 100%;
    height: 20px;
    /* float: left; */
    text-align: center;
    font-size: 18px;
    position: absolute;
    top: 10px;
    left: 0;
}
.closeimg {
    /* position: absolute; */
    /* top: 5px;
    right: 5px; */
    float: right;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-size: 18px;
    cursor: pointer;
    z-index: 9999;
    /* background: chartreuse; */
}
.cont1 {
    width: 100%;
    height: 105px;
    display: flex;
    justify-content: space-between;
}
.cont11 {
    height: 105px;
    background: rgba(0, 104, 183, 0.3);

    border-radius: 6px;

    border-radius: 6px;
    height: 105px;
    width: 345px;
}
.cont111 {
    height: 105px;
    background: rgba(0, 104, 183, 0.3);

    border-radius: 6px;

    border-radius: 6px;
    height: 105px;
    width: 655px;
}
.cont2 {
    width: 100%;
    height: 433px;
    display: flex;
    justify-content: space-between;
}
.cont22 {
    width: 895px;
    height: 433px;
    background: rgba(14, 61, 131, 0.2);
    border: 1px solid rgba(0, 255, 255, 0.5);
}
#schart1 {
    float: left;
    width: 895px;
    height: 399px;
}
#schart1- {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 895px;
    height: 399px;
}
#schart1- img {
    width: 200px;
    height: 200px;
}
#schart {
    float: left;
    width: 895px;
    height: 399px;

    display: flex;
    justify-content: space-around;
}
#schart11,
#schart22 {
    width: 340px;
    height: 350px;
    /* background: darkgoldenrod; */
}

div::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
div::-webkit-scrollbar-track {
    background: rgb(20, 44, 109);
}
div::-webkit-scrollbar-thumb {
    background: #68b7d6;
    border-radius: 10px;
}
div::-webkit-scrollbar-thumb:hover {
    background: rgb(92, 153, 211);
}
div::-webkit-scrollbar-corner {
    background: #179a16;
}
</style>

